/*
* @Author: Jianglinhan
* @Date:   2019-07-11 15:28:19
* @Last Modified by:   Jianglinhan
* @Last Modified time: ...
*/

//引入node中的path模块
const path = require('path');
// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入css打包插件引入css打包插件
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");

// 环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';


// 获取html-webpack-plugin参数的方法 (处理html打包的公共方法)
var getHtmlConfig = function (name, title) {
    return {
        template: './src/view/' + name + '.html',
        filename: './view/' + name + '.html',
        title: title,
        // minify : 防止引号被去掉
        minify: {
            removeAttributeQuotes: false
        },
        inject: true,
        hash: true,
        chunks: [name]
    };
};


module.exports = {
    // 入口文件配置
    entry: {
        // 多页配置
        index: './src/js/index.js'
    },
    //出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的文件名称
        filename: './js/index.js',
        // publicPath: website.publicPath
        //解决静态路径的问题，比如图片的路径
    },
    externals: {
        'jquery': 'jQuery'
    },
    // plugin 
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: "css/[name].css",
            allChunks: true
        }),

        //配置html模板
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
    ],

    // 配置规则
    module: {
        rules: [
            {
                test: /\.css/,
                use: ExtractTextWebpackPlugin.extract({ use: ['css-loader'] })
            },
            {
                test: /\.scss/,
                use: ExtractTextWebpackPlugin.extract({ fallback: "style-loader", use: ['css-loader', 'sass-loader'] })
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/,
                // ../ 是为了解决图片路径问题 - 图片用file-loader解决 不要用url-loader
                use: [{
                    loader: 'file-loader',
                    options: {
                        publicPath: "../img/",
                        outputPath: 'img/'
                    }
                }]
            },
            // {
            //     test: /\.png$/,
            //     use: { loader: "url-loader", options: { mimetype: "img/png", limit: "4096" } }
            // },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader', options: {
                        //打包html文件
                        minimize: true,
                        // 是否打包为最小值
                        removeComments: true,
                        // 是否移除注释
                        collapseWhitespace: false,
                        //处理html内的插入图片
                        attrs: ['img:src', 'img:data-src', 'audio:src'],
                        minimize: true
                    }
                }
            }
        ]
    },

    devServer: {
        port: 8086,
        // open参数： 是否自动打开浏览器
        open: false
    }
}